<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>varmilo 阿米洛机械键盘官方网站</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
  <!-- 引入两个swiper -->
  <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="/css/index.css">
</head>
  <style>
    .swiper-container {
    width: 100%;
    height: 615px;
}
  </style>
<body>
  <header class=".header"></header>
  <!-- 轮播图广告 -->
  <main>
    <div class="banner swiper-container">
      <ul class="ba-box swiper-wrapper">
        <li class="active swiper-slide" style="width: 100%;"><img src="/images/index/0706101657.png"></li>
        <li class="swiper-slide"><img src="/images/index/lun1.png"></li>
        <li class="swiper-slide"><img src="/images/index/0904010812.png"></li>
        <li class="swiper-slide"><img src="/images/index/custornimg.jpg"></li>
        <li class="swiper-slide"><img src="/images/index/0815120017.png"></li>
      </ul>
      <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
    </div>
    <!-- 产品介绍 -->
    <div class="pro-intro">
      <div class="pro-left">
        <div class="pro-1">
          <img src="/images/index/0605111317.png">
          <div class="theme"><a href="/html/list.html?id=5" style="color: #fff;text-decoration: none;">主题键盘></a></div>
        </div>
        <div class="pro-3">
          <img src="/images/index/0605111359.png" alt="">
          <div class="theme" style="position: absolute;top: 420px;left: 420px;"><a href="/html/list.html?id=3" style="color: #fff;text-decoration: none;">主题键盘></a></div>
          <div class="theme" style="position: absolute;top: 470px;left: 420px;">开始定制></div>
        </div>
      </div>
      <div class="pro-right">
        <div class="pro-2">
          <img src="/images/index/0605111328.png" alt="">
          <div class="theme"><a href="/html/list.html?id=4" style="color: #fff;text-decoration: none;">主题键盘></a></div>
          <div class="pro-text">
            <img src="/images/index/text1.png" class="">
            <img src="/images/index/text2.png" class="">
          </div>
        </div>
        <div class="pro-4">
          <img src="/images/index/0605111411.png" alt="">
          <div class="theme" style="position: absolute;left: 520px;top: 330px;"><a href="/html/list.html?id=13" style="color: #fff;text-decoration: none;">主题键盘></a></div>
          <div class="theme" style="position: absolute;left: 520px;top: 380px;">开始定制></div>
        </div>
      </div>
      <div class="pro-bottom">
        <div class="pro-5">
          <img src="/images/index/0605111420.png" alt="">
          <div class="theme" style="position: absolute;left: 500px;top: 250px;"><a href="/html/list.html" style="color: #fff;text-decoration: none;">主题键盘></a></div>
        </div>
        <div class="pro-6">
          <img src="/images/index/0605111429.png" alt="">
          <div class="theme" style="position: absolute;left: 10px;top: 10px;"><a href="/html/list.html" style="color: #fff;text-decoration: none;">主题键盘></a></div>
          <div class="theme" style="position: absolute;left: 10px;top: 60px;">开始定制></div>
        </div>
      </div>
    </div>
  </main>
  <!-- 底部 -->
  <footer></footer>
  <script src="/libs/swiper/js/swiper.min.js"></script>
  <script src="/libs/require/require.min.js" data-main="/js/index"></script>
</body>

</html>